<template>
  <div class="m-helpCenter m-window">
    <div class="m-help-left" v-if="showType=='list'" v-loading="treeDataLoading">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
      <el-tree
        class="filter-tree"
        :data="treeData"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        @node-click="treeNodeClick"
        ref="tree"
      ></el-tree>
    </div>
    <div class="m-help-right" v-if="showType=='list'">
      <div class="m-right-header">
        <el-row :gutter="10">
          <el-form :inline-message="true" label-position="left">
            <el-col :span="10">
              <el-form-item label="标题:" label-width="70px" class="rightItem">
                <el-input placeholder="输入标题" v-model="questionTitle"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="search(1)">查询</el-button>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="m-right-content" v-loading="loading" v-if="rowData.length>0">
        <div class="m-listItem" v-for="item in rowData" :key="item.id">
          <div class="titleIcon">
            <i class="el-icon-document"></i>
          </div>
          <div class="content" @click="viewDetail(item)">{{item.title}}</div>
          <div class="createdTime">{{item.createDate}}</div>
        </div>
      </div>
      <div class="emptyData"  v-loading="loading" v-else>暂无数据</div>
      <div class="m-page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.current"
          :page-sizes="[30,50,100,150,200]"
          :page-size="pageInfo.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
        ></el-pagination>
      </div>
    </div>
    <!-- 问题详情 -->
    <question-view @goBackList="goBackList" v-if="showType=='view'" :detail="questionInfo"></question-view>
  </div>
</template>

<script>
import QuestionView from "@/views/comprehensive/common/questionView"
import Msg from "@/public/message"
export default {
  data () {
    return {
      // 页面显示内容
      showType: 'list',
      filterText: '',
      questionTitle: '',
      treeData: [],
      treeDataLoading: false,
      defaultProps: {
        children: 'childs',
        label: 'enumName'
      },
      pageInfo: {
        size: 30,
        current: 1,
        total: 0
      },
      loading: false,
      rowData: [],
      // 分类编码
      enumTypes: [],
      questionInfo: {}
    }
  },
  props: {
    addTab: {
      type: Function
    }
  },
  methods: {
    //  树节点过滤
    filterNode (value, data) {
      if (!value) return true;
      return data.enumName.indexOf(value) !== -1;
    },
    // 查询问题列表数据
    search (flag) {
      if (flag) this.pageInfo.current = 1
      const { current, size } = this.pageInfo
      let params = {
        likeParams: {
          title: this.questionTitle//问题标题
        },
        inParams: {
          traType: this.$global.accountType == 4 ? [0, 2] : [1, 2],
          type: this.enumTypes
        },
        eqParams:{
            state:1
        },
        current,
        size
      }
      this.loading = true
      this.$http.getQuestionList(params).then(({ data }) => {
        this.loading = false
        if (data.code == 1) {
          this.rowData = data.rows
          this.pageInfo.total = data.total
        } else {
          Msg.showErrorMsg(data.info)
        }
      }).catch(err => {
        this.loading = false
        Msg.showErrorMsg(err.data.message)
      })
    },
    // 每页显示条数改变
    handleSizeChange (val) {
      this.pageInfo.size = val
      this.search(1)
    },
    // 页码改变
    handleCurrentChange (val) {
      this.pageInfo.current = val
      this.search()
    },
    // 点击树节点回调
    treeNodeClick (treeItem, node) {
      this.enumTypes = []
      foreachChilds(treeItem, this.enumTypes)
      function foreachChilds (arr, typeCodes) {
        const { childs } = arr
        if (Array.isArray(childs) && childs.length > 0) {
          childs.forEach(item => {
            typeCodes.push(item.enumCode)
            foreachChilds(item, typeCodes)
          })
        }
      }
      this.enumTypes.push(treeItem.enumCode)
      this.search(1)
    },
    // 获取问题类型树
    getTreeData () {
      this.treeDataLoading = true
      this.$http.getQuestionTypeTree({ enumCode: 'questionType' }).then(({ data }) => {
        this.treeDataLoading = false
        if (data.code == 1) {
          this.treeData = data.rows
        } else {
          Msg.showErrorMsg(data.info)
        }
      }).catch(err => {
        this.treeDataLoading = false
        Msg.showErrorMsg(err.data.message)
      })
    },
    // 查看问题详情
    viewDetail (row) {
      const { title, content, attachments } = row
      this.questionInfo = {
        title,
        content,
        attachments
      }
      this.showType = "view"
    },
    goBackList () {
      this.showType = 'list'
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree.filter(val);
    }
  },
  components: {
    QuestionView
  },
  mounted () {
    this.getTreeData()
    this.search(1)
  }
}
</script>
<style lang="less" scoped>
.m-helpCenter {
  display: flex;
  .m-help-left {
    min-width: 300px;
    max-width: 500px;
    padding: 10px;
    border: 1px solid #dcdfe6;
    .el-tree {
      margin-top: 10px;
    }
  }
  .m-help-right {
    flex: 1;
    position: relative;
    .el-row {
      .el-form {
        .el-form-item {
          margin-bottom: 10px;
        }
      }
      .el-col {
        .el-button {
          min-width: 60px;
        }
      }
    }
    .m-right-content {
      position: absolute;
      left: 22px;
      right: 10px;
      bottom: 30px;
      top: 50px;
      overflow: auto;
      .m-listItem {
        display: flex;
        justify-content: space-between;
        padding: 15px 0;
        border-bottom: 1px dashed #dcdfe6;
        align-items: center;
        .titleIcon {
          margin-right: 8px;
        }
        .content {
          flex: 1;
          word-break: break-all;
          &:hover {
            color: #409eff;
            cursor: pointer;
          }
        }
        .createdTime {
          min-width: 120px;
          font-size: 12px;
          color: #999;
          margin-left: 8px;
        }
      }
    }
    .emptyData {
      position: absolute;
      top: 50%;
      left: 50%;
    }
  }
}
</style>